iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 27
0
自我挑戰組

JavaScript 新手筆記系列 第 27

Day27 - AJAX(01)

  • 分享至 

  • xImage
  •  

前言

今日進行 AJAX 的觀念以及簡單的操作

AJAX

  • AJAX = Asynchronous JavaScript And XML = 使用非同步資料請求的縮寫,代表非同步 JS 和 XML
    • 可以允許向伺服器要求資料,但不需要重新載入整個頁面,資料通常以 JSON 的格式傳遞
    • 如: google 搜尋時會自動出現相關文字;輸入帳號頁面會進行檢查是否正確或字數滿足;點選購物車會更新並顯示已經加入

遠端撈取資料

  • 資料請求流程:

    • var xhr = new XMLHttpRequest();
    • xhr.open('get','test.json',true);
    • xhr.send(null);
  • XMLHttpRequest():用來建立 AJAX 請求,使用 var xhr = new XMLHttpRequest(); 建立(變數 xhr 名稱可自訂)

  • xhr.open('格式','網址',BooLean)

    • '格式'get 代表讀取資料,post 代表傳送資料
    • '網址':資料的路徑
    • BooLeantrue 代表非同步,不會等資料回傳就繼續下一個動作,一般預設值; false 代表同步,會等資料回傳才進行下一步
  • xhr.send('資訊'):若無需要,則使用 null 代表空值

  • xhr.readyState:可用 readyState 確認狀態

    • 狀態 0 (UNSENT):代表已經產生一個 XMLHttpRequest,但是還沒有連結你要撈的資料(代表尚未 open())
    • 狀態 1 (OPENED):代表已經使用 open() 讀取網址,但還沒有傳送
    • 狀態 2 (HEADERS_RECEIVED):代表已經使用 send()
    • 狀態 3 (LOADING):資料目前讀取下載中
    • 狀態 4 (DONE):已經撈到資料了,數據已完全接收
    • 參考:XMLHttpRequest.readyState
    • 參考:XMLHttpRequest — JavaScript 發送 HTTP 請求 (I)

實作

  • 利用六角的 API 進行 get 練習:https://hexschool.github.io/ajaxHomework/data.json

  • 開啟 chrome 的 console 進行以下確認

    • var xhr = new XMLHttpRequest();
    • xhr.readyState; // 顯示 0
    • xhr.open('get','https://hexschool.github.io/ajaxHomework/data.json',true);
    • xhr.readyState; // 顯示 1
    • xhr.send(null);
    • xhr.readyState; // 顯示 4
    • xhr.response; // 顯示 "[{"name":"王小名"}]"
  • 一開始實作 send() 會跳錯誤 net::ERR_BLOCKED_BY_CLIENT,頁面是練習的 index.html ,另開一個 chrome 的新頁面卻可以成功,經確認後應該是開啟廣告過濾工具的關係,關閉後即可正常 send()

  • 送出 send() 後,狀態為 4 (done),要再次送出send()會要求要先 open() 讓狀態為 1 (opened) 才可以繼續

次回

繼續說明 AJAX


上一篇
Day26 - BOM
下一篇
Day28 - AJAX(02)
系列文
JavaScript 新手筆記31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言